<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .con{
            width: 300px;
            margin: 50px auto;
        }
        .con div{
            width: 19px;
            height: 19px;
            background: url(star.png);
            display: inline-block;
            vertical-align:text-top;
            cursor: pointer;
            
           }
           .col{  
            width: 300px;
            margin: 50px auto;

           }
        /* .con div:hover{
            background-position: 0 -28px;
        } */
        .con .bill{
            background-position: 0 -28px;
        }
    </style>
</head>
<body>
    <div class="con">
        <span>评分</span>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <span class="flax"></span>
    </div>
    <div class="col">
        <div class="pl"></div>
    </div>
    <script>
        var xin = document.querySelectorAll('.con div');
        var pl = document.querySelector('.pl');
        var flax  = document.querySelector('.flax');
  var msg = [
    "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
    "不满意|部分有破损，与卖家描述的不符，不满意",
    "一般|质量一般，没有卖家描述的那么好",
    "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
    "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
  ];
  var score = 0;
        for(var i=0;i<xin.length;i++){
            xin[i].index = i;
            xin[i].onmouseover = function(){
                for (var j = 0; j < xin.length; j++) {
                    if (j <= this.index) {
                        xin[j].classList.add('bill');
                    } else {
                        xin[j].classList.remove('bill');
                    }
                }
                var pls = msg[this.index].split('|');
                pl.innerHTML = '<strong>'+pls[0]+'</strong><p>'+pls[1]+'</p>';

            }   
         xin[i].onclick = function(){
      // 记录分数
      score = this.index+1;
      var pls = msg[this.index].split('|');
      pl.innerHTML = '<strong>'+score+'分 '+pls[0]+'</strong><p> '+pls[1]+'</p>';
      flax.innerHTML = '';
    }
        }
    
    </script>
</body>
</html>